<template>
  <div class="columnLink">
    <div class="buttons">
      <el-button size="mini" type="primary" plain @click="linkEvent('name')">同名映射</el-button>
      <br />
      <el-button size="mini" type="primary" plain @click="linkEvent('index')">同行映射</el-button>
      <br />
      <el-button size="mini" plain @click="linkEvent('cancel')">取消映射</el-button>
    </div>
    <znxd-link-left-right v-model="currentLinkData" :initData="linkData" :nodeData="nodeData"></znxd-link-left-right>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nodeData: {
        // dataFrom: [
        //   {
        //     mode: "title",
        //     label: "源表字段"
        //   },
        //   {
        //     mode: "header",
        //     columnName: "字段名称",
        //     columnType: "字段类型",
        //     columnLong: "字段长度"
        //   },
        //   {
        //     id: "from-a",
        //     columnName: "a",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-b",
        //     columnName: "b",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-c",
        //     columnName: "c",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-d",
        //     columnName: "d",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "from-e",
        //     columnName: "e",
        //     columnType: "int",
        //     columnLong: 10
        //   }
        // ],
        // dataTo: [
        //   {
        //     mode: "title",
        //     label: "目标表字段"
        //   },
        //   {
        //     mode: "header",
        //     columnName: "字段名称",
        //     columnType: "字段类型",
        //     columnLong: "字段长度"
        //   },
        //   {
        //     id: "to-1",
        //     columnName: "1",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   { id: "to-2", columnName: "2", columnType: "int", columnLong: 10 },
        //   { id: "to-3", columnName: "3", columnType: "int", columnLong: 10 },
        //   {
        //     id: "to-4",
        //     columnName: "4",
        //     columnType: "int",
        //     columnLong: 10
        //   },
        //   {
        //     id: "to-5",
        //     columnName: "5",
        //     columnType: "int",
        //     columnLong: 10
        //   }
        // ]
        dataFrom: [],
        dataTo: []
      },
      // linkData: [
      //   // { from: "from-a", to: "to-1" },
      //   // { from: "from-b", to: "to-2" },
      //   // { from: "from-c", to: "to-3" }
      // ],
      currentLinkData: [],
      linkData: [],
      selection: {}
    };
  },
  watch: {
    currentLinkData: {
      deep: true,
      handler: function (val) {
        console.log("columnLink", val);
        this.$emit("input", val);
      }
    },
    initData: {
      deep: true,
      handler: function (val) {
        this.initPage();
        // console.log("this.nodeData", this.nodeData);
      }
    }
    // initData(val) {
    //   if (val) {
    //     this.linkData = [...val];
    //   }
    // }
  },
  // computed: {
  //   selection() {
  //     let obj = {};
  //     if (this.initData) {
  //       obj = {
  //         dataSourceSelection: this.initData.redadColumns,
  //         dataTargetSelection: this.initData.writerColumns
  //       };
  //     }
  //     console.log("selection", obj);
  //     return obj
  //   }
  // },
  props: {
    initData: Object,
    dataTarget: Object,
    dataSource: Array
  },
  methods: {
    linkEvent(type) {
      // console.log("type", type);
      switch (type) {
        case "name": {
          let links = [];
          this.selection.dataSourceSelection.map((x, index) => {
            let arr = this.selection.dataTargetSelection.filter(target => {
              return x.columnName === target.columnName;
            })
            if (arr.length > 0) {
              let link = { from: "from-" + x.columnName, to: "to-" + arr[0].columnName }
              links.push(link);
            }
          })
          this.linkData = links;
        }
          break;
        case "index": {
          let links = [];
          this.selection.dataSourceSelection.map((x, index) => {
            if (this.selection.dataTargetSelection && this.selection.dataTargetSelection.length > index) {
              let link = { from: "from-" + x.columnName, to: "to-" + this.selection.dataTargetSelection[index].columnName }
              links.push(link);
            }
          })
          this.linkData = links;
        }
          break;
        case "cancel":
          this.linkData = [];
          break;
        default:
          break;
      }
    },
    // 校验数据
    validateForm() {
      let flag = true;
      if (!this.currentLinkData || this.currentLinkData.length === 0) {
        flag = false;
        this.$message({
          message: "字段关系不能为空",
          type: "error"
        });
        return flag;
      }
      return flag;
    },
    initPage() {
      console.log("initPage", 1)
      let dataSourceSelection = this.initData.redadColumns;
      let dataTargetSelection = this.initData.writerColumns;
      this.selection.dataSourceSelection = dataSourceSelection;
      this.selection.dataTargetSelection = dataTargetSelection;
      // this.linkData = this.initData.mappingFileds;
      console.log("link initData", this.initData);
      let nodeData = {
        dataFrom: [],
        dataTo: []
      };
      nodeData.dataFrom = [
        {
          mode: "title",
          label: "接口字段"
        },
        {
          mode: "header",
          columnName: "字段名称",
          columnType: "字段类型",
          columnLong: "字段长度"
        }
      ]

      if (dataSourceSelection) {
        dataSourceSelection.map(x => {
          let { columnName, columnType, columnLong } = x;
          let obj = {
            id: "from-" + columnName,
            columnName,
            columnType,
            columnLong
          }
          nodeData.dataFrom.push(obj);
        })
      }
      nodeData.dataTo = [
        {
          mode: "title",
          label: "目标表字段"
        },
        {
          mode: "header",
          columnName: "字段名称",
          columnType: "字段类型",
          columnLong: "字段长度"
        }
      ]
      if (dataTargetSelection) {
        dataTargetSelection.map(x => {
          let { columnName, columnType, columnLong } = x;
          let obj = {
            id: "to-" + columnName,
            columnName,
            columnType,
            columnLong
          }
          nodeData.dataTo.push(obj);
        })
      }
      this.nodeData = nodeData;
    }
  },
  mounted() {
    this.initPage();
    this.linkData = this.initData.mappingFileds;
  }
};
</script>
<style lang="scss" scoped>
.columnLink {
  position: relative;
  height: calc(100vh - 350px);
  .buttons {
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 20px;
    display: flex;
    // height: 140px;
    width: 80px;
    flex-direction: column;
    // justify-content: space-between;
    // border: 1px solid red;
  }
}
</style>
